<template>
  <div id="provinces-chart"></div>
</template>

<script>
import {listProvinceAll} from "@/api/res";
import {mapMutations} from "vuex";

let echarts = require('echarts')
require('echarts/theme/macarons'); // echarts 主题

export default {
  name: "allProvincesChart",
  methods: {
    ...mapMutations(['setProvinceLoading']),
    initChart(res) {
      let colors = ['#ee6666', '#a2db7b', '#aecfff', '#9f0000'];
      let provinceNames = []
      let confirm = [];
      let storeConfirm = [];
      let heal = [];
      let dead = [];
      for (let datum of res.data) {
        provinceNames.push(datum.areaName)
        confirm.push(datum.confirm)
        storeConfirm.push(datum.storeConfirm)
        heal.push(datum.heal)
        dead.push(datum.dead)
      }
      // 获取当前时间
      let myChart = new echarts.init(document.getElementById('provinces-chart'), 'macarons');

      let option = {
        color: colors,
        title: {
          text: '全省信息',
          subtext: '数据来自网络、 最后更新时间: ' + res.data[0].updateDate,
          left: '2%',
          top: '2%',
          textStyle: {
            fontWeight: 1000,
            fontSize: 18,
            color: 'rgba(0,0,0,0.8)'
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,0.8)',//通过设置rgba调节背景颜色与透明度
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: 10,
          bottom: 10,
          selected: { // 设置默认不显示
            '总确诊数': false,
            '现存确诊人数': true,
            '治愈人数': false,
            '死亡数': false,
          },
          selectedMode: 'single' // 设置单选多选模式
          // data: ['总确诊数', '现存确诊人数', '治愈人数', '死亡数']
        },
        grid: {
          left: '3%',
          right: 50,
          top: 70,
          bottom: 50,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLine: {
            onZero: false,
            lineStyle: {
              color: '#111111'
            }
          },
        },
        dataZoom: [
          {
            type: 'slider',
            xAxisIndex: 0,
            filterMode: 'none',
            start: 0,
            end: 100
          },
          {
            type: 'slider',
            yAxisIndex: 0,
            filterMode: 'none',
            start: 70,
            end: 100
          }
        ],
        yAxis: {
          type: 'category',
          data: provinceNames,
          axisLine: {
            onZero: false,
            lineStyle: {
              color: '#111111'
            }
          },
        },
        series: [

          {
            name: '总确诊数',
            type: 'bar',
            data: confirm
          },
          {
            name: '现存确诊人数',
            type: 'bar',
            data: storeConfirm
          },
          {
            name: '治愈人数',
            type: 'bar',
            data: heal
          },
          {
            name: '死亡数',
            type: 'bar',
            data: dead
          }
        ]
      };

      myChart.setOption(option);
    }
  },
  mounted() {
    listProvinceAll().then(res => {
      this.initChart(res)
      this.setProvinceLoading(false)
    })

  }
}
</script>

<style scoped>
#provinces-chart {
  width: 780px;
  height: 470px;
  background-color: var(--background-color);
  margin: 10px 0 0 0;
  border-radius: var(--border-radius);
}
</style>